<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="userlist.name" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model.number="userlist.age" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="userlist.sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="addFn">添加/修改</button>
    </div>
    <div>
      <table border="1" cellpadding="10" cellspacing="0">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.sex }}</td>

          <td>
            <button @click="del(index)">删除</button>
            <button @click="editFn(index)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
// 目标：学生信息，增删改查
// 1.标签赋值过来md
// 2.0先写个假的数据
// 2.1v-for把假的数据铺到表格上
// 2.2定义一个对戏（3个属性），关联姓名，年龄，性别页面上肢
// 注意：变量和value是双向绑定，互相影响

// 功能1：增加
// 3.0按钮--点击事件

// 功能2：删除
// 3.1按钮---点击事件。传索引

// 功能3：编辑
// 3.2编辑按钮--点击事件（传索引）
// 3.3用索引知道那个对象要编辑
// 3.4给v-model关联user，赋值，回显数据到页面上
// 3.5定义editIndex变量（既要保存正在编辑索引//表示正在编辑状态）===正在编辑索引保存起来
// 3.6添加/修改按钮事件方法中，用editIndex区分新增/修改，修改后editIndex=null
export default {
  data () {
    return {
      list: [{
        name: '小黄',
        age: 18,
        sex: '男'
      },
      {
        name: '小黄慌',
        age: 18,
        sex: '男'
      }
      ],
      userlist: {
        name: '',
        age: 0,
        sex: ''
      },
      editIndex: null//编辑状态
    }
  },
  methods: {
    // 增加修改按钮点击事件
    addFn () {
      // this.list.push(this.userlist)
      // 问题L数组里对戏（保存内存地址），userlist变量（相同内存地址），userlist改变，会影响到数组
      // 解决：拷贝---浅拷贝（只拷贝第一层数据）
      // userlist: {
      //   name: '',
      //     age: 0,
      //       sex: '',
      //         obj: {//这就是二层了，浅拷贝不会在拷贝的
      //     name: '',
      //       age: 0,
      //         sex: '',
      //           obj: {//这就是3层了，浅拷贝不会在拷贝的
      //       name: '',
      //         age: 0,
      //           sex: '',
      //         }
      //   }
      // }
      // 判断如果编辑状态为空就新增
      if (this.editIndex === null) {
        let obj = { ...this.userlist }//展开this.userlist对象的key和value值到原地，和外层{}想成一个全新对象，给obj变量
        this.list.push(obj)
        // 填写完数据进行清空
        this.userlist.name = ''
        this.userlist.age = 0
        this.userlist.sex = ''
      } else {
        let obj = { ...this.userlist }
        this.list.splice(this.editIndex, 1, obj)//（删除编辑状态，1条，新增）
        // 填写完数据进行清空
        this.userlist.name = ''
        this.userlist.age = 0
        this.userlist.sex = ''
        // 让编辑状态为空
        this.editIndex = null
      }

    },
    // 删除
    del (index) {
      this.list.splice(index, 1)
    },
    // 编辑
    editFn (index) {
      let obj = this.list[index]//要知道是编辑list数组里的那个，索引是数组里的每个遍历对象，userlist存放在页面上就是list数组里
      // 把v-model双向绑定数据浅拷贝上面知道那个数据要进行编辑
      this.userlist = { ...obj }//简单写法回显数据
      // 复杂写法
      // this.userlist.name = obj.name
      // this.userlist.age = obj.age
      // this.userlist.sex = obj.sex

      this.editIndex = index//调用回显显示那个索引，没有这个无法编辑玩数据进行修改

    }
  }
}
</script>